<template>
    <div class="comp">
        <!-- 图表区域 -->
        <div class="chart" ref="broken"></div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            echartsInstance:null,//存储echarts实例对象
            allData:[]//业务数据
        };
    },
    mounted() {
        // 1.定义获取实例 设置基础静态配置项的绘图方法
        this.initEcharts()
        // 2.获取业务数据
        this.getData()
        // 3.监听窗口变化
        window.addEventListener('resize',this.adapTive)
        // 4.使用适配方法
        this.adapTive()
    },
    methods: {
        // 1.定义获取实例 设置基础静态配置项的绘图方法
        initEcharts(){
            // 1.1获取实例对象
            this.echartsInstance = this.$echarts.init(this.$refs.broken,'dark')
            // 1.2设置静态配置项（配置项是不会变的）
            let initOptions={
                // 配置标题
                title:{
                    text:"▍农作物种植生长趋势",
                    top:"3%",
                    left:"3%"
                },
                // 配置图例
                legend:{
                    show:true,
                    icon:'circle',
                    top:"12%",
                    left:"3%"
                },
                // 坐标系
                grid:{
                    show:false,
                    top:"20%",
                    bottom:"3%",
                    left:"3%",
                    right:"3%",
                    containLabel:true
                },
                // 提示语
                tooltip:{
                    show:true,
                    trigger:'axis',
                    axisPointer:{
                        type:"cross"
                    }
                },
                // x
                xAxis:{
                    type:"category"
                },
                // y
                yAxis:{
                    type:"value"
                }
            }
            // 1.3绘制图表
            this.echartsInstance.setOption(initOptions)
        },
        // 2.获取业务数据
        async getData(){
            let {data} = await this.$http.get('CropGrowthTrend')
            this.allData = data;
            console.log(data)
            // 继续绘制图表
            this.setEcharts()
        },
        // 3.根据业务数据继续完善图表
        setEcharts(){
            // 3.1获取类目轴上数据及系列上的数据([{type,data},{},{}....])
            let categoryData = this.allData[0].content.map(item=>item.month)
            let serirseData = this.allData.map(item=>{
                // 获取每个城市的1-12月份的数据
                let datas = item.content.map(m=>m.area)
                return {
                    name:item.city,//系列名称
                    type:"line",
                    data:datas,
                    stack:true,//使用堆叠效果
                    smooth:true,//开启圆滑曲线
                    areaStyle:{},//设置堆叠填充样式
                }
            })
            // 3.2设置完善的配置项
            let setOptions={
                xAxis:{
                   data:categoryData//配置类目轴数据
                },
                series:serirseData
            }
            // 3.3再次绘制图表 setOption()可以将多次的绘图配置项合拼重置绘制新的图表
            this.echartsInstance.setOption(setOptions)
        },
        // 4.窗口适配
        adapTive(){
            // console.log('窗口适配了')
            // 设置比例尺
            let width = this.$refs.broken.offsetWidth;
            // 比例尺基数3.5-3.7
            let scale = width / 100 *3.6
            // 问题：字体大小 柱状宽度、圆角
            let adapOption={
                // 配置标题
                title:{
                    textStyle:{
                        fontSize:scale
                    }
                },
                // 配置图例图形
                legend:{
                   itemWidth:scale/2,
                   itemHeight:scale/2,
                   itemCap:scale/2
                },
            }
            // 重新适配绘制图表
            this.echartsInstance.setOption(adapOption)
            this.echartsInstance.resize()//只能处理坐标系内的图表大小
        }
    },
    beforeDestroy(){
        // 注销窗口监听器 防止内存泄露
        window.removeEventListener('resize',this.adapTive)
    }
};
</script>

<style scoped>
</style>